<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>选择座位</title>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<meta name="keywords" content="jQuery,选座">
<link rel="stylesheet" type="text/css" href="webpage/com/mengtian_tech/smart_lab/room/selectSeats.css" />
<style type="text/css">
.demo{width:700px; margin:40px auto 0 auto; min-height:450px;}
@media screen and (max-width: 360px) {.demo {width:340px}}

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}
.booking-details {float: right;position: relative;width:200px;height: 450px; }
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;}
.booking-details p{line-height:26px; font-size:16px; color:#999}
.booking-details p span{color:#666}
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
div.seatCharts-row {height: 35px;}
div.seatCharts-seat.available {background-color: #B9DEA0;}
div.seatCharts-seat.focused {background-color: #76B474;border: none;}
div.seatCharts-seat.selected {background-color: #E6CAC4;}
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
ul.seatCharts-legendList {padding-left: 0px;}
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

#deviceInfo{
	padding-left:10px;
}

#historyInfo{
	color: red;
	margin: 10px 0;
	text-align: center;
	height: 20px;
}
</style>

</head>
<body>
<input id="computerRoomId" name='computerRoomId' type="hidden" value="${computerRoom.id }"/>
<input id="deviceId"  type="hidden" />
<input id="deviceApplyId"  type="hidden" value="${deviceApplyId }"/>
<input id="unOpenSeatStr"  type="hidden" value="${unOpenSeatStr }"/>
<div id="historyInfo"></div>
<div id="main">
   <div class="demo">
   		<div id="seat-map">
			<div class="front">讲台</div>							
		</div>
		<div class="booking-details">
			<p>座位：</p>
			<ul id="selected-seats"></ul>
			 
			<button class="checkout-button" style="height: 30px" id="">保存</button>
					
			<div id="legend"></div>
		</div>
		<div style="clear:both"></div>
   </div>
				
  <br/>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src = "webpage/com/mengtian_tech/smart_lab/room/jquery.seat-charts.min.js"></script>
<script type="text/javascript">
var stuselectedSeats='';
function getSelectSeat(){
	if(stuselectedSeats == ''){
		alert("请选择座位");
		return null;
	}else{
		return stuselectedSeats;
	}
	
}


Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}



var rowsCount = 5;
var colsCount = 5;

var selectedSeats = '${selectedSeats}';
if(!(selectedSeats=="hasSeleted")){
	selectedSeats = selectedSeats.split(",");
}

var seatMap = [];
for(var i=0;i<rowsCount;i++){
	var seat= "";
	for(var j=0;j<colsCount;j++){
		seat += "a";
	}
	seatMap.push(seat);
}

$(document).ready(function() {
	var maxSeatsSelect = 1;//最大可选座位数
	var selectedCount = 0;//已选座位
	
	var $cart = $('#selected-seats'); //座位区
	
	var sc = $('#seat-map').seatCharts({
		map: seatMap,
		naming : {
			top : false,
			getLabel : function (character, row, column) {
				return column;
			}
		},
		legend : { //定义图例
			node : $('#legend'),
			items : [
				[ 'a', 'available',   '可选座' ],
				[ 'a', 'unavailable', '已预约']
			]					
		},
		click: function () { //点击事件
			if (this.status() == 'available'&&selectedCount<maxSeatsSelect) { //可选座
				$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
					.attr('id', 'cart-item-'+this.settings.id)
					.data('seatId', this.settings.id)
					.appendTo($cart);
			
				selectedCount++;
				
				return 'selected';
			} else if (this.status() == 'selected') { //已选中
					//删除已预订座位
					$('#cart-item-'+this.settings.id).remove();
			
					selectedCount--;
					//可选座
					return 'available';
			} else if (this.status() == 'unavailable') { //已售出
				return 'unavailable';
			} else {
				return this.style();
			}
		}
	});
	sc.get([${unOpenSeatStr}]).status('unavailable');
	
	$('#seat-map').append("<div style=\"margin-top:10px;text-align:center;\">注:单击座位选中，单击座位取消</div>");
	//已售出的座位
	initUnavailableSeats(sc);
	
	$("input[name='applyDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'});});
	$("input[name='applyEndDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'});});
	
	$(".checkout-button").click(function(){
		var selectedSeats = "";
		sc.find('selected').each(function () {
			this.settings.row+1;
			this.settings.label;
			selectedSeats += (((this.settings.row+1) +"_" + this.settings.label) + ",");
		});
		
		if(!validate()){
			return;
		}
		
		if(selectedSeats==""){
			tip("请选择座位");
			return;
		}else{
			stuselectedSeats = selectedSeats;
		}
	});
	showSeatHistoryInfo();
});
 

function validate(){
 
	
	if($("input[name='applyDate']").val()==""){
		tip("请选择开始时间");
		return false;
	}
	if($("input[name='applyEndDate']").val()==""){
		tip("请选择结束时间");
		return false;
	}
	if($("input[name='applyDate']").val()<new Date().Format("yyyy-MM-dd HH:mm:ss")){
		tip("开始时间不能早于当前时间");
		return false;
	}
	if($("input[name='applyEndDate']").val()<=new Date().Format("yyyy-MM-dd HH:mm:ss")){
		tip("结束时间不能早于当前时间");
		return false;
	}
	if($("input[name='applyDate']").val()>=$("input[name='applyEndDate']").val()){
		tip("开始时间不能晚于结束时间");
		return false;
	}
	return true;
}

//已售出的座位
function initUnavailableSeats(sc){
	var unavailableSeats = [];
	if(selectedSeats=="hasSeleted"){
		for(var i=1;i<=rowsCount;i++){
			for(var j=1;j<=colsCount;j++){
				unavailableSeats.push((i)+"_"+j);
			}
		}
	}else{
		for(var i=0; i<selectedSeats.length;i++){
			unavailableSeats.push(selectedSeats[i]);
		}
	}
	sc.get(unavailableSeats).status('unavailable');
}

function showSeatHistoryInfo(){
	var historySeat = "${historySeat}";
	if(!(historySeat=="")){
		var html = "预约未通过，预约的座位为："+ historySeat+"， 预约时间为：${beginDate} 至  ${endDate}";
	}else{
		$("#historyInfo").hide();
	}
	$("#historyInfo").append(html);
}

</script>
</body>
</html>